@extends('backend::modal')
@section('title',$page_title)
@push('styles')
    <link href="{{asset(config('view.plugin').'/layui/layui_ext/cascader/cascader.css')}}" rel="stylesheet">
    <link href="{{asset('assets/vendor/other/jquery.searchableSelect.css')}}" rel="stylesheet">
@endpush

@section('content')
    @component('backend::component.form.form')
        @slot('page_title') {{$page_title}} @endslot
        @slot('formId') edit-action @endslot
        @slot('action') {{route('d_Action_editAction',['action_id'=>$info->id])}} @endslot
            @component('backend::component.form.form-group')
                @slot('title') 功能名称 @endslot
                @component('backend::component.form.input')
                    @slot('name') action_title @endslot
                    @slot('value') {{$info->title}} @endslot
                @endcomponent
            @endcomponent
            @component('backend::component.form.form-group')
                @slot('title') 关联功能 @endslot
                <div id="relate_action" class="layui-input-block"
                     data-content="{{json_encode($relate_actions)}}"
                     data-default="{{json_encode(str2arr($info->relate_action))}}"
                ></div>
            @endcomponent
            @component('backend::component.form.form-group')
                @slot('title') 所属模块 @endslot
                @component('backend::component.form.select',['options'=>config('app.module_type')])
                    @slot('name') module_name @endslot
                    @slot('value') {{$info->module_name}} @endslot
                @endcomponent
            @endcomponent
            @component('backend::component.form.form-group')
                @slot('title') 父级功能 @endslot
                <div class="layui-input-block">
                    <input type="text" id="action_parent" data-parents='{{$parent_info}}' data-default="{{$info->parent_ids}}"  class="form-control" readonly="readonly" value="">
                    <input type="hidden" id="parent-value" name="action_parents"  value="{{$info->parent_ids}}">
                </div>
            @endcomponent
            @component('backend::component.form.form-group')
                @slot('title') 功能类型 @endslot
                <div>
                    @foreach(config('app.auth_type') as $key=>$item)
                        @component('backend::component.radio')
                            @slot('name') action_type @endslot
                            @slot('title') {{$item}} @endslot
                            @slot('value') {{$key}} @endslot
                            @if($info->auth_type == $key)
                                @slot('checked') checked @endslot
                            @endif
                        @endcomponent
                    @endforeach
                </div>
            @endcomponent
            @component('backend::component.form.form-group')
                @slot('title') 排序 @endslot
                @component('backend::component.form.input')
                    @slot('name') sort @endslot
                    @slot('value') {{$info->sort??'1000'}} @endslot
                @endcomponent
            @endcomponent
            @component('backend::component.form.form-group')
                @slot('title') 状态 @endslot
                <div>
                    @foreach(['0'=>'禁用','1'=>'启用'] as $value=>$title)
                        @component('backend::component.radio')
                            @slot('title') {{$title}} @endslot
                            @slot('name') status @endslot
                            @slot('value') {{$value}} @endslot
                            @if($info->status == $value)
                                @slot('checked') checked @endslot
                            @endif
                        @endcomponent
                    @endforeach
                </div>
            @endcomponent
            @slot('buttons')
                @component('backend::component.form.button')
                    @slot('title') 提交 @endslot
                    @slot('params') {"formId":"#edit-action"} @endslot
                    @slot('class') btn-min-width ajax-form @endslot
                @endcomponent
                @component('backend::component.form.button')
                    @slot('title') 重置 @endslot
                    @slot('type') reset @endslot
                    @slot('color') danger @endslot
                    @slot('class') btn-min-width @endslot
                @endcomponent
            @endslot
    @endcomponent
@endsection

@push('scripts')
    <script src="{{asset('assets/vendor/other/jquery.searchableSelect.js')}}"></script>
    <script>
        layui.use(['jquery','layer','cascader','iconPicker','selectPlus'], function(){
            var $ = layui.jquery;
            var layer = layui.layer;
            var cascader = layui.cascader;
            var iconPicker = layui.iconPicker;
            var selectPlus = layui.selectPlus;
            init();

            function init(){
                $("input[name='action_type']").each(function () {
                    $(this).off('click').on('click',function () {
                        var actionType = parseInt($(this).val());
                        if($.inArray(actionType,[1,2])>-1){
                            addInputForm($(this).parents('.form-group'))
                        }else{
                            removeInputForm($(this).parents('.form-group'));
                        }
                    })
                });
                selectParentAction();

                $('select[name="action_name"]').searchableSelect({
                    afterSelectItem:function () {
                        var title = $(this.element).find('option:selected').data('title');
                        $('input[name="action_title"]').val(title);
                    }
                });

                var relateActions = relateAction();
                relateActions.getChecked();

            }
            
            function relateAction() {
                return selectPlus.render({
                    el: '#relate_action',
                    data: $("#relate_action").data('content'),
                    valueName: "name",
                    inputName:"relate_action",
                    title: "title",
                    values: $("#relate_action").data('default'),
                    valueSeparator: ", "
                });

            }
            
            function addInputForm(obj) {
                if (!$(obj).siblings().is('div[id="set-menu"]')){
                    var html = '<div class="form-group" id="set-menu"><label>设为菜单</label><div>'
                        +'<label class="radio-inline label-radio label-radio-red" >'
                        +'<input type="radio"  name="set_menu" class="ipt-radio" value="1" >'
                        +'<span class="span-radio"></span>是</label>'
                        +'<label class="radio-inline label-radio label-radio-red" >'
                        +'<input type="radio"  name="set_menu" class="ipt-radio" value="0" >'
                        +'<span class="span-radio"></span>否</label>'
                        +'</div></div>';
                    $(obj).after(html);
                    $("input[name='set_menu']").each(function () {
                        $(this).off('click').on('click',function () {
                            var setMenu = parseInt($(this).val());
                            if(setMenu == 1){
                                addMenuInput($(this).parents('.form-group'))
                            }else{
                                removeMenuIput($(this).parents('.form-group'));
                            }

                        })
                    });
                }
            }
            
            function removeInputForm(obj) {
                if ($(obj).siblings().is('div[id="set-menu"]')){
                    $('#set-menu').remove();
                }
            }
            
            function selectParentAction() {
                var data = $('#action_parent').data('parents');
                var defaultVal = $('#action_parent').data('default').toString();
                if(defaultVal&&defaultVal.indexOf(",") != -1){
                    var defaultValArr = defaultVal.split(",")
                }else{
                    var defaultValArr = [defaultVal?defaultVal:0];
                }
                cascader({
                    elem: "#action_parent",
                    data: data,
                    triggerType: "change",
                    //showLastLevels:true,
                    value: defaultValArr,
                    changeOnSelect:true,
                    success:function (valData) {
                        $('#parent-value').val(valData);
                    }
                });
            }
            
            function addMenuInput(obj) {
                if(!$(obj).siblings().hasClass('menu-group')){
                    var html = '<div class="form-group menu-group">'
                        +'<label>父级菜单</label>'
                        +'<div class="layui-input-block">'
                        +'<input type="text" id="menu_parent" data-parents="{{$menus}}"  class="form-control" readonly="readonly" value="">'
                        +'<input type="hidden" id="menu-value" name="menu_parents"  value="">'
                        +'</div><span class="help-block"></span></div>'
                        +'<div class="form-group" id="set-menu"><label>菜单图标</label><div>'
                        +'<div class="layui-input-block">'
                        +'<input type="text" id="iconPicker" name="menu_icon" class="form-control" value="hcl-biaodan">'
                        +'</div><span class="help-block"></span></div>';
                    $(obj).after(html);
                    selectParentMenu();
                    iconPickerMenu();
                }
            }
            
            function removeMenuIput(obj) {
                if($(obj).siblings().hasClass('menu-group')){
                    $('.menu-group').remove();
                }
            }

            function selectParentMenu() {
                var data = $('#menu_parent').data('parents');
                cascader({
                    elem: "#menu_parent",
                    data: data,
                    triggerType: "change",
                    value: ["0"],
                    success:function (valData) {
                        $('#menu-value').val(valData);
                    }
                });
            }
            
            function  iconPickerMenu() {
                iconPicker.render({
                    // 选择器，推荐使用input
                    elem: '#iconPicker',
                    // 数据类型：fontClass/unicode，推荐使用fontClass
                    type: 'fontClass',
                    // 是否开启搜索：true/false
                    search: true,
                    iconClass:'hcl',
                    // 是否开启分页
                    page: true,
                    // 每页显示数量，默认12
                    limit: 12
                });
                iconPicker.checkIcon('iconPicker', 'hcl-biaodan','hcl');
            }
        });
    </script>
@endpush